<template>
  <div v-loading="loading" class="WebPageMannager">
    <h4>网页管理</h4>
    <div class="cus-tabs-style">
      <div class="key-search clearfix">
        <div class="floatfix">
          <el-input
            v-model="keywords"
            suffix-icon="el-icon-search"
            maxlength="20"
            placeholder="输入关键词搜索"
          />
          <el-button
            style="margin-left: 10px"
            type="primary"
            @click="handelSearch"
          >搜索</el-button>
          <el-button
            type="primary"
            @click="
              $router.push({
                name: 'AddWebPage',
              })
            "
          >添加网页</el-button>
        </div>
      </div>
      <el-table
        :data="Bindata"
        class="cus-table"
        border
        height="480"
      >
        <el-table-column label="ID" align="center" prop="id" width="90" fixed="left" />
        <el-table-column label="网页标题" prop="title" fixed="left" min-width="180" />
        <el-table-column label="网页地址" prop="url" min-width="250">
          <template slot-scope="scope">
            <a :href="scope.row.url" target="_blank" style="color: #0095ff">{{ scope.row.url }}</a>
          </template>
        </el-table-column>
        <el-table-column label="备注说明" prop="remark" min-width="100" />
        <el-table-column label="添加时间" align="center" prop="addTime" width="160" />
        <el-table-column label="更新时间" align="center" prop="updateTime" width="160" />
        <el-table-column label="操作" align="center" fixed="right" width="90">
          <template slot-scope="scope">
            <div class="operation">
              <el-button
                type="text"
                @click="handelEdit(scope.row)"
              >编辑</el-button>
              <el-button
                type="text"
                @click="handelRmove(scope.row)"
              >删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="float:right;margin:40px 0;"
        :current-page="pages.page"
        :page-sizes="pages.pageSizes"
        :page-size="pages.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pages.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import { webPageList, webPageDelete } from '@/api/webpage'
import { Loading } from 'element-ui'
/** 网页管理 */
export default {
  name: 'WebPageManagement',
  data() {
    return {
      activeModel: '0',
      keywords: '',
      Bindata: [],
      loading: false,
      pages: {
        pageSizes: [10, 20, 30, 40, 50],
        page: 1,
        limit: 10,
        total: 0
      }
    }
  },
  mounted() {
    this.loadding()
  },
  activated() {
    this.loadding()
  },
  methods: {
    /** 搜索 */
    handelSearch() {
      this.loadding()
    },
    loadding() {
      this.loading = true
      webPageList({
        shopId: localStorage.getItem('shopId'),
        keywords: this.keywords,
        page: this.pages.page,
        limit: this.pages.limit
      }).then(request => {
        this.Bindata = request.data.data.list
        this.pages.total = request.data.data.total
        this.loading = false
      }).catch(error => {
        console.log(error)
        this.loading = false
      })
    },
    handleSizeChange(v) {
      this.pages.limit = v
      this.loadding()
    },
    handleCurrentChange(v) {
      this.pages.page = v
      this.loadding()
    },
    handelEdit(row) {
      this.$router.push({
        name: 'EditWebPage',
        query: { p: this.$ed({ id: row.id }) }
      })
    },
    handelRmove(row) {
      const vm = this

      const msg = '确定删除【' + row.title + '】网页吗？'
      vm.$confirm(msg, '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const loadingInstance = Loading.service()
        webPageDelete({
          id: row.id
        }).then(res => {
          loadingInstance.close()
          vm.$message.success('删除网页成功')
          vm.loadding()
        }).catch(res => {
          loadingInstance.close()
          if (res && res.data && res.data.errno !== 0) {
            vm.$message.error(`${res.data.errmsg}（${res.data.errno}）`)
          }
        })
      }).catch(() => {})
    }
  }
}
</script>

<style lang="scss" scoped>
  .clearfix:after {
    content: '020';
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }
  .clearfix {
    zoom: 1;
  }
  .WebPageMannager {
    padding: 30px;
    .cus-tabs-style {
      .key-search {
        width: 100%;
        .floatfix {
          float: right;
          .el-input {
            width: 220px;
          }
        }
      }
      .cus-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .cus-table {
        margin-top: 30px;
        .operation {
          display: flex;
          align-items: center;
          justify-content: flex-end;
          margin: 0px auto;
        }
      }
    }
  }
</style>
